import React, { useContext } from 'react'
import classes from './Counter.module.css'
import TestContext from '../../store/CardCountext'
//引入FontAwesome 图标字体库
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
import {faPlus, faMinus} from "@fortawesome/free-solid-svg-icons"

 

function Counter(props) {
    const ctx = useContext(TestContext)
    const addButtonHandler = () => {
        ctx.addMealHandler(props.meal)
    }
    const subButtonHandler = () => {
        ctx.subMealHandler(props.meal)
    }
    return (
        <div className={classes.counter}>
            {
                (props.meal.amount && props.meal.amount !== 0) ? (
                <>
                    <button className={classes.sub} onClick={subButtonHandler}>
                        <FontAwesomeIcon icon={faMinus}/>
                    </button>
                    <span className={classes.count}>{props.meal.amount}</span>
                </>
                ) : ''
            }
            
            <button className={classes.add} onClick={addButtonHandler}>
                <FontAwesomeIcon icon={faPlus}/>
            </button>
        </div>
    )
}

export default Counter